<template>
	<view class="diy-banner-box mb10">
		<swiper class="swiper" :indicator-dots="indicatorDots" :indicator-active-color="indicatorActiveColor"
			:autoplay="autoplay" :interval="interval" :duration="duration">
			<swiper-item v-for="(item,index) in itemData" :key="index" @click="gotoPages(item)">
				<image :src="item.bannerUrl"></image>
				<!-- <u--image :src="item.bannerUrl" width="100%" height="340rpx" radius="8px" @click="click"></u--image> -->
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				indicatorActiveColor: '#ffffff'
			}
		},
		props: ['itemData'],
		created() {
			// this.interval = this.itemData.params.interval;
			// this.indicatorActiveColor = this.itemData.style.btnColor;
		},
		methods: {
			/*跳转页面*/
			gotoPages(data) {
				uni.navigateTo({
					url: "/subpkg/richText/richText?type=banner&bannerCode=" + data.bannerCode
				});
			}
		}
	}
</script>

<style>
	.diy-banner-box {
		box-sizing: border-box;
		margin: 0 20rpx;
		overflow: hidden;
		border-radius: 16rpx;
		transform: translateY(0);
	}

	.diy-banner-box,
	.diy-banner-box .swiper {
		height: 340rpx;
	}

	.diy-banner-box image {
		/* margin: 20rpx 20rpx 0; */
		width: 100%;
		height: 340rpx;
		border-radius: 16rpx;
	}
</style>